<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<input type="button" value="修改Msg" @click="msg='No'" />
			<h3 id="h3">{{ msg }}
			</h3>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data:{
				msg:"ok"
			},
			methods :{
				show(){
					console.log("kjkjkj")
				}
			},
			beforeCreate(){
				//这是第一个生命周期函数，表示实例完全创建出来之前，会执行她
				//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化，此时控制台是undefined
				console.log(this.msg)
			},
			created(){ //这是第二个生命周期函数，data和Methods都已经被初始化好了，控制台会显示调用数据
				//如果强调使用methods中的方法，或按和操作data中的数据，最早只能在created中操作
				console.log(this.msg)
			},
			beforeMount(){
				//这是第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到 页面中
				//在执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的模板字符串
				console.log(document.getElementById('h3').innerText)
			},
			mounted(){ //这是第四个生命周期函数 表示，内存中的模板，已经真实的挂载到了页面中，用户可以看到渲染好的页面了
			// 注意:mounted是实例创建期间的最后一个生命周期函数，当执行完	mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中一动不动
				console.log(document.getElementById('h3').innerText)
			},
			beforeUpdate() {
				//这时候，表示我们的界面还没有被更新，当执行beforeUpdate的时候，此时页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
				console.log('页面上元素的内容：'+document.getElementById('h3').innerText)
				console.log('data中的msg数据是'+this.msg)
			},
			updated() {
				console.log('页面上元素的内容：'+document.getElementById('h3').innerText)
				console.log('data中的msg数据是'+this.msg)
				//当执行update时候，页面中显示的数据已经和data数据同步啦
			}

		})
	</script>
</html>
